<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="submitForm('ruleForm')">保存</el-button>
            </div>
            <div class="table-form-box">
                <h3 class="h3">人事合同</h3>
                <el-form :model="formData" :rules="rules" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="8%" />
                            <col width="16%" />
                            <col width="8%" />
                            <col width="16%" />
                            <col width="8%" />
                            <col width="16%" />
                        </colgroup>
                        <thead></thead>

                        <tbody>
                            <tr class="tr-title">
                                <td colspan="6">基本信息</td>
                            </tr>

                            <tr>
                                <td align="right">合同编号:</td>
                                <td>
                                    <el-form-item prop="contractNo">
                                        <el-input
                                            placeholder="保存后自动生成"
                                            v-model="formData.contractNo"
                                            size="small"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>员工:
                                </td>
                                <td>
                                    <el-form-item prop="employeeName">
                                        <div @click="showTreeDialog('员工')">
                                            <!--puperiorUserId-->
                                            <el-input
                                                placeholder="请输入内容"
                                                v-model="formData.employeeName"
                                                size="small"
                                                readonly
                                                suffix-icon="el-icon-search"
                                            ></el-input>
                                        </div>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>合同名称:
                                </td>
                                <td>
                                    <el-form-item prop="contractName">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.contractName"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>合同类型:
                                </td>
                                <td>
                                    <el-form-item prop="contractTypeId">
                                        <el-select
                                            v-model="formData.contractTypeId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'合同类型')"
                                            @focus="dictItemForPerfection('合同类型')"
                                        >
                                            <el-option
                                                v-for="(item,index) in contractTypeOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>合同状态:
                                </td>
                                <td>
                                    <el-form-item prop="contractStatusId">
                                        <el-select
                                            v-model="formData.contractStatusId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'合同状态')"
                                            @focus="dictItemForPerfection('合同状态')"
                                        >
                                            <el-option
                                                v-for="(item,index) in contractStatusOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>签约时间:
                                </td>
                                <td>
                                    <el-form-item prop="signTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.signTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>生效时间:
                                </td>
                                <td>
                                    <el-form-item prop="validTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.validTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>失效时间:
                                </td>
                                <td>
                                    <el-form-item prop="endTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.endTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">试用结束日期:</td>
                                <td>
                                    <el-form-item prop="tryEndtime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.tryEndtime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">试用月数:</td>
                                <td>
                                    <el-form-item prop="tryMonth">
                                        <el-input-number v-model="formData.tryMonth" :min="0" :max="12"></el-input-number>
                                    </el-form-item>
                                </td>
                                <td align="right">试用工资:</td>
                                <td>
                                    <el-form-item prop="tryMoney">
                                        <el-input-number
                                            v-model="formData.tryMoney"
                                            :min="0"
                                            :precision="2"
                                            :step="1"
                                        ></el-input-number>
                                    </el-form-item>
                                </td>
                                <td align="right">转正工资:</td>
                                <td>
                                    <el-form-item prop="correctMoney">
                                        <el-input-number
                                            v-model="formData.correctMoney"
                                             :min="0"
                                            :precision="2"
                                            :step="1"
                                        ></el-input-number>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">备注:</td>
                                <td colspan="5">
                                    <el-form-item prop="remarks">
                                        <el-input
                                            placeholder="请输入内容"
                                            type="textarea"
                                            :rows="3"
                                            v-model="formData.remarks"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>

                <upload-files :files="fileList" @fun="dealFiles" v-if="flag"></upload-files>
            </div>
        </div>
        <tree-search
            :isShow="showSearch"
            :dialogTitle="searchDialogTit"
            @edit="searchBack"
            @close="closeTreeDialog"
        ></tree-search>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
export default {
    inject: ['reload'], //注入reload方法
    name: 'addContract',
    data() {
        return {
            pageTitle: '',
            isEdit: false, // 是新增还是修改
            flag: false,
            editId: '', // 修改的id
            rules: {
                //合同名称
                contractName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change'
                    },
                    {
                        required: true,
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的名称',
                        trigger: 'change'
                    }
                ],
                //员工
                employeeName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change'
                    }
                ],
                //合同类型
                contractTypeId: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                //合同状态
                contractStatusId: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                //签约时间
                signTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                //生效时间
                validTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                //失效时间
                endTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ]
            },
            formData: {
                contractName: '', // 合同名称
                contractNo: '', // 合同编号
                contractStatusId: '', // 合同状态id
                contractStatusName: '', //  合同状态name
                contractStatusValue: '', // 合同状态值
                contractTypeId: '', // 字典项 id 合同类型
                contractTypeName: '', // 合同类型名称
                contractTypeValue: '', // 合同类型值
                correctMoney: '', // 转正工资,单位为分
                employeeId: '', // 所属员工id
                employeeName: '', //所属员工名字
                endTime: '', // 结束时间
                remarks: '', // 备注
                remindEmployeeName: '', // 提醒员工名字
                signTime: '', // 签约时间
                tryEndtime: '', // 试用期到期日期
                tryMoney: '', // 试用期工资,单位为分
                tryMonth: '', // 试用月数
                uploadReturns: [
                    // 附件上传详情
                    {
                        fileName: '', // 文件名
                        fileType: '', // 文件类型名称
                        fileUrl: '', // 文件所在地址
                        ownerId: '', // 所关联的表主键id.即是该文件所属的表的主键
                        uploadUserId: '', // 文件上传人员ID
                        uploadUserName: '' //  文件上传人员名字
                    }
                ],
                validTime: '' // 合同生效时间
            },
            dialogVisible: false,
            // 上传文件,选择的文件
            fileList: [],
            files: [],
            // 下拉框选项
            contractStatusOptions: [],
            contractTypeOptions: [],
            sexOptions: [],
            showSearch: false, // 显示搜索树弹窗
            searchDialogTit: '编辑'
        };
    },
    components: {},
    methods: {
        // 如果是修改先获取数据。
        getData() {
            appMain
                .contractFindById({}, this.editId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;
                        //获取人员档案附件
                        this.uploadFileInfoFindById(this.formData.contractNo);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 提交数据
        submit() {
            let params = this.formData;
            let mothedName = '';
            if (this.isEdit) {
                mothedName = 'contractUpdateById';
            } else {
                mothedName = 'contractInsert';
            }

            appMain[mothedName](params)
                .then(res => {
                    if (res.data.code === 20000) {
                        if (this.isEdit) {
                            this.getData();
                        }
                        this.$router.push({
                            //核心语句
                            path: '/contractList' //跳转的路径
                        });
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
            console.log(this.$router);
        },
        // 选择员工
        showTreeDialog(tit) {
            console.log('showTreeDialog');
            this.searchDialogTit = tit;
            this.showSearch = true;
        },
        // 树组件搜索结果返回
        searchBack(data) {
            console.log(data.backData, 'searchTreeBack');
            this.formData.employeeName = data.backData.name;
            this.formData.employeeId = data.backData.id;
            this.showSearch = false;
        },
        closeTreeDialog(data) {
            this.showSearch = data.showDialog;
        },
        // 上传文件返回
        dealFiles(data) {
            this.fileList = data.backData;
            this.formData.uploadReturns = this.fileList;
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                        this.flag = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        /**
         * 下拉框数据start
         */
        dictItemForPerfection(item) {
            //国籍
            appMain.dictItem({ typeName: item }).then(res => {
                if (res.data.code === 20000) {
                    if (item == '合同类型') {
                        this.contractTypeOptions = res.data.data;
                    } else if (item == '合同状态') {
                        this.contractStatusOptions = res.data.data;
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        //下拉框选取值
        handleValue(e, dict) {
            if (dict == '合同类型') {
                let item = this.selectChooseItem(this.contractTypeOptions, e);
                this.formData.contractTypeId = item.id;
                this.formData.contractTypeName = item.itemName;
                this.formData.contractTypeValue = item.itemValue;
            } else if (dict == '合同状态') {
                let item = this.selectChooseItem(this.contractStatusOptions, e);
                this.formData.contractStatusId = item.id;
                this.formData.contractStatusName = item.itemName;
                this.formData.contractStatusValue = item.itemValue;
            }
        },
        //通用字典选择
        selectChooseItem(item, id) {
            for (const key in item) {
                if (item[key].id == id) {
                    return item[key];
                }
            }
        },
        /**
         * 下拉框获取end
         */
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.submit();
                    //this.resetForm('ruleForm');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    watch: {
        $route() {
            if (this.$route.query.id) {
                this.editId = this.$route.query.id;
                this.isEdit = true;
                this.getData(); // 获取要修改的数据
            } else {
                this.isEdit = false;
                this.flag = true;
            }
        }
    },
    mounted() {
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    created() {
      this.dictItemForPerfection('合同类型');
      this.dictItemForPerfection('合同状态');
        if (this.$route.query.id) {
            this.editId = this.$route.query.id;
            this.isEdit = true;
            this.getData(); // 获取要修改的数据
        } else {
            this.isEdit = false;
            this.flag = true;
        }
    }
};
</script>

<style scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    /* padding: 5px 50px; */
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;

    z-index: 1;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.mt20 {
    margin-top: 20px;
}
.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}

.pre-img {
    width: 100%;

    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>
